<template>
  <div class="top">
    <headIndex @getCat="valueChange"/>
      <div class="search">
        <div class="main_cer clearfix" style="background:#ffffff; padding: 50px;">
          <div class="dqwz">
            <span>当前位置：</span>
            <span><a href="/home">首页</a></span>
            <span>></span>
            <span>搜索</span>
          </div>
          <ul v-if="contList.length > 0">
            <li v-for="(item,index) in contList">
              <a :href="'/article?id=' + item.infoid" target="_blank" class="flex flex-align-center flex-pack-justify">
                <div class="flex flex-align-center">
                  <i class="iconfont icon-xiangyou"></i>
                  <div class="wz">{{item.infotitle}}</div>
                </div>                     
                <div class="time">{{item.addtime}}</div>
              </a>
            </li>
          </ul>
          <el-empty v-else description="暂无更多内容"></el-empty>
          <div v-if="contList.length > 0" class="page fr">
            <div class="flex flex-pack-justify">
                <el-pagination
                :small="true"
                :background="true"
                @current-change="handleSizeChange"
                :current-page="pageindex" 
                :page-size="pagesize" 
                layout="total"
                :total="retotal"
                prev-text="上一页"
                next-text="下一页"
                >
                </el-pagination>

                <el-pagination
                :small="true"
                :background="true"
                @current-change="handleSizeChange"
                :current-page="pageindex" 
                :page-size="pagesize" 
                layout="slot, prev, pager, next"
                :total="retotal"
                >
                </el-pagination>                   
            </div> 
          </div>
        </div>       
      </div>
    <footIndex />
  </div>
</template>
<style lang="scss">
.el-pager .number {
  border-bottom: none;
}
.el-pager .more {
  border-bottom: none;
}
.el-menu{
  background: none;
}
.el-submenu .el-submenu__title{
  font-size: 18px;
  // color: #305792;
  height: 60px;
  line-height: 60px;
}
.el-submenu.is-opened .el-submenu__title{
  font-size: 18px;
  font-weight: bold;
  color: #305792;
  height: 60px;
  line-height: 60px;
}
.el-submenu__title i{
  font-size: 16px;
  font-weight: bold;
}
.el-submenu.is-opened .el-submenu__title i{
  color: #305792;
}
.el-menu-item{
  font-size: 18px;
  height: 60px;
  line-height: 60px;
}
.el-menu-item:hover{
  font-size: 18px;
  font-weight: bold;
  color: #305792;
  height: 60px;
  line-height: 60px;
  background: none;
}
.el-menu-item.is-active{
  font-size: 18px;
  font-weight: bold;
  color: #305792;
  height: 60px;
  line-height: 60px;
  background: none;
  .wz{
    color: #305792;
  }
}
.el-submenu .el-menu-item{
  font-size: 14px;
  height: 42px;
  line-height: 42px;
}
.el-submenu .el-menu-item:hover{
  font-size: 14px;
  height: 42px;
  line-height: 42px;
  background: #ffffff;
  border-left:3px solid #305792;
}
.el-submenu .el-menu-item.is-active{
  font-size: 14px;
  height: 42px;
  line-height: 42px;
  background: #ffffff;
  border-left:3px solid #305792;
  .wz{
    color: #305792;
  }
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
  background: none;
  color: #000000;
  font-size: 16px;
}
</style>
<script setup name="list">
import headIndex from "./components/headIndex/index.vue";
import footIndex from "./components/footIndex/index.vue";
// import menuTree from './components/menuTree/index.vue'
// menuTree: () => import('./components/menuTree/index.vue')
import { listpassInfo } from "@/api/yxzx/info";
import { leftCategorylist } from '@/api/yxzx/home';
import { searchList, searchListtwo } from "@/api/system/home";
export default {
  components: {
    headIndex,
    footIndex,
  },
  data() {
    return {
      contList: [],
      nav_list: [],
      status: 0,
      retotal: 0,
      pageindex: 1,
      pagesize: 20,
      reCount: 0,
      newsList: [],
      wzTitle: "",
      listId: this.GetQueryString("catid"),
      firstName: '',
      secondtName: '',
      activeIndex: '',
      menuVoList: [],
      getId: '',
      queryParams: {
        shijian: '',
        paixu: 'daoxu',
        qi: '',
        zhi: '',
        fanwei: 'quanbu',
        neirong: '',
        shifouxuanzelanmu: '0',
        categoryid: '',
        pageindex: 1,
        pagesize: 20,
      },
    };
  },
  watch:{
    $route:{
      immediate:true,
      handler(){
        if(this.$route.query.text){
          this.queryParams.neirong = this.$route.query.text
          this.getList(this.getId)
        }
      }
    }
  },
  created() {
    // this.getList();
    leftCategorylist(this.listId).then((response) => {
      if(response.length > 0){
        this.menuVoList = response
        this.secondtName = response[0].categoryname
        this.getId = response[0].categoryid
        this.getList(this.getId)
      } else {
        this.getId = this.listId
        this.getList(this.getId)
      }    
    })
  },
  methods: {
    valueChange(val) {
      val.map((item,index) => {
        if (item.categoryid == this.listId) {
          this.firstName = item.categoryname
        }
      })
    },
    handleSelect(val){
      this.secondtName = val.split('/')[1]
      this.getId = val.split('/')[0]
      this.getList(this.getId)
      console.log(val.split('/'))
    },
    goList(index,item){
      this.status = index

    },
    handleSizeChange(val) {
      this.queryParams.pageindex = val;
      this.getList(this.getId)
    },
    getList(id) {
      this.queryParams.neirong = this.GetQueryString("text")
      searchListtwo (
            this.queryParams.neirong,
            this.queryParams.pageindex,
            this.queryParams.pagesize,
            this.queryParams.shijian,
            this.queryParams.qi,
            this.queryParams.zhi,
            this.queryParams.fanwei,
            this.queryParams.shifouxuanzelanmu,
            this.queryParams.categoryid,
            this.queryParams.paixu
        ).then(response => {
        this.contList = response.InfoList
        this.retotal = response.PageInfo.recordCount
        this.reCount = response.PageInfo.pageCount
      })
    },
    // 获取地址栏的参数
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      } else {
        return null;
      }
    },

    // 获取树形结构左侧栏目
    tree(data, name) {
      for (let i = 0; i < data.length; i++) {
        let item = data[i]
        if (item.categoryname === name) {
          return item.categoryid
        } else {
          if (item.xiajicategorylist && item.xiajicategorylist.length > 0) {
            let res = tree(item.xiajicategorylist, name)
            if (res) return res
          }
        }
      }
    }
  },
};
</script>
